<template>
  <div class="about">
    <van-nav-bar
    title="购物车"
    left-text="返回"
   
    left-arrow
    @click-left="$router.go(-1)"
   
    />
    <!-- 购物车列表 -->
    <div v-for="item,index in $store.state.cartList" :key="item._id" class="cart-list">
        <!-- 复选框 -->
        <van-checkbox v-model="item.status" @change="changeOne"></van-checkbox>
        <van-card
        :num="item.num"
        :price="item.price"
        :title="item.title"
        :thumb="item.pic"
        />
        <van-stepper v-model="item.num" />
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="getTotal.total*100" :button-text="`${getTotal.sum}件`">
        <!-- vant里面的复选框要用@click事件 -->
      <!-- <van-checkbox v-model="checkedAll" @click="changeAll">全选</van-checkbox> -->
      <!-- 自己的input  用@change事件 -->
     <van-button @click="delSelect">删除所选</van-button>
      <input  v-model="checkedAll" @change="changeAll" type="checkbox">全选
     </van-submit-bar>
    
  </div>
</template>
<script>
export default {
    data() {
        return {
            checkedAll:false,//全选按钮的状态
        }
    },
    computed: {
        getTotal(){
            // 总价格
            let total = 0
            // 总数量
            let sum = 0
           this.$store.state.cartList.forEach(item=>{
            //   计算是选中的   status == true
            if(item.status){
              total+=item.price*item.num
              sum+=item.num
            }
           }) 
           return {total,sum}
        }
    },
    methods: {
        // 点击全选
        changeAll(){
            console.log('触发了',this.changeAll);
            this.$store.commit('changeAll',this.checkedAll)
        },
        // 点击上面复选框
        changeOne(){
          this.checkedAll = this.$store.state.cartList.every(item=>item.status == true)
        },
        delSelect(){
            this.$store.commit('delSelect')
        }
    },
}
</script>
<style lang="scss" scoped>
.cart-list{
    display: flex;
    align-items: center;
    .van-card{
        flex:1;
    }
}
</style>

